<template>
  <FormView
    :toolbar-attrs="{
      buttons: ['back', { save: !disabled, edit: true, 'edit:bottom': true, submit: true }, 'slot:bottom', 'cancel', 'slot']
    }"
    :toolbar-listeners="{ save: saveOrUpdate, edit: e => editTest(e) }">
    <template #toolbar-button>
      <ToolbarButton icon="el-icon-setting" label="顶测" @click="sayHello" />
    </template>
    <template #footer-button>
      <ToolbarButton icon="el-icon-setting" label="底测" @click="sayHello" />
    </template>
    <template #edit>
      <ToolbarButton icon="el-icon-search" label="覆盖顶部编辑" @click="edit1" />
    </template>
    <!--    <template #edit-down>
          <ToolbarButton icon="el-icon-search" label="覆盖底部编辑" @click="edit2"/>
        </template>-->
    <template v-if="showSubmit" #submit-down>
      <ToolbarButton icon="el-icon-search" type="primary" label="覆盖默认提交按钮" @click="edit2" />
    </template>
    <FormHolder ref="form" size="mini" :model="entity" :disabled="disabled" label-width="80px" label-position="right">
      <ElRow :gutter="20">
        <FormInput
          v-model="entity.name"
          prop="name"
          tips="11111"
          required
          :rules="[
            { required: true, message: '请输入姓名' },
            { validator: checkNumberInteger, message: '请输入数字！' }
          ]"
          label="姓名">
          <template #warn> 6666 </template>
          <template #tips> 66663333 </template>
        </FormInput>
        <ElCol :span="12">
          <ElFormItem prop="age" label="年龄" :rules="[{ required: true, message: '请输入年龄' }]">
            <ElInputNumber v-model="entity.age" :controls="false" placeholder="请输入年龄" />
          </ElFormItem>
        </ElCol>
        <FormRadioGroup v-model="entity.test" label="test" confirm chinese />
      </ElRow>
    </FormHolder>
    <FlexRow>
      <FlexItem text-center>1</FlexItem>
      <FlexItem text-center>2</FlexItem>
    </FlexRow>
    <FlexColumn>
      <FlexItem flex-row>
        <FlexItem text-center>1</FlexItem>
        <FlexItem text-center>2</FlexItem>
      </FlexItem>
      <FlexItem flex-column style="height: 200px">
        <div>11</div>
        <FlexItem absolute text-center>
          <p v-for="item in 20" :key="item">{{ item }}</p>
        </FlexItem>
      </FlexItem>
    </FlexColumn>
    <AwesomeButton text="AwesomeButton" @click="tt" />
    <FormButton text="double" @click="tt">{{ showSubmit ? '666666' : null }}</FormButton>
    <FormButton text="double" @click="tt" />
    <FormButton text="loadable" loadable @click="tt" />
    <FormButton text="confirmable" confirmable @click="tt" />
    <FormButton text="loadable + confirmable" loadable confirmable @click="tt" />
  </FormView>
</template>

<script>
  import form from '@/vue/mixin/form'
  import { create, load, save, update } from './api'
  import { delay } from '@web-utils/core'
  import { checkNumberInteger } from '@/util/form-validate'

  export default {
    name: 'FormViewDemo',
    mixins: [form],
    data() {
      return {
        showSubmit: false,
        entity: {
          id: -1,
          name: '',
          test: '',
          age: null
        }
      }
    },
    created() {
      setTimeout(() => {
        this.showSubmit = true
      }, 3000)
    },
    methods: {
      checkNumberInteger,
      async tt(e) {
        await delay(5000)
        // console.log(e)
      },
      create,
      load,
      save,
      update,
      async initEntity(id) {
        return { id, name: 'Test' }
      },
      async saveOrUpdate() {
        // console.log(arguments)
        await delay(1000)
        // console.log('save !')
        await this.persist()
      },
      async editTest() {
        // console.log(arguments)
        await delay(1000)
        // console.log(this.a.b)
        // console.log('editTest')
      },
      async sayHello() {
        // console.log(arguments)
        await delay(1000)
        // console.log('sayHello !')
      },
      async edit1() {
        // console.log(arguments)
        await delay(1000)
        // console.log('edit1 !')
      },
      async edit2() {
        // console.log(arguments)
        await delay(1000)
        // console.log('edit2 !')
      }
    }
  }
</script>
